<template>
  <div>
    <el-tabs type="border-card" v-model="tag">
      <el-tab-pane :name="item.ref" :label="item.title" :key="item.ref" v-for="item in list">
        <cron-rule-info @change="change" :dis="item.dis || false" :reg="item.reg" :rule="item.rule" :ref="item.ref" :type="item.ref" :title="item.title" />
      </el-tab-pane>
    </el-tabs>
    <el-divider>时间表达式</el-divider>
    <div class="box1">
      <div class="box1-d" :key="item.ref + 'd'" v-for="item in list">
        <span class="d-title">{{item.title}}</span>
        <div class="d-text">{{item.value}}</div>
      </div>
      <div class="box1-d flex1">
        <span class="d-title">完整表达式</span>
        <div class="d-text">{{completeCron}}</div>
      </div>
    </div>
    <div class="box2">
      <span>最近5次运行时间</span>
      <ul>
        <li class="li">2021-07-23 11:44:21</li>
        <li class="li">2021-07-23 11:44:21</li>
        <li class="li">2021-07-23 11:44:21</li>
        <li class="li">2021-07-23 11:44:21</li>
        <li class="li">2021-07-23 11:44:21</li>
      </ul>
    </div>
  </div>
</template>

<script>
  function create_data() {
    const list = [
      {title: '秒', ref: 's', rule: {max: 60, min: 0}, value: '*', reg: ',-*/'},
      {title: '分', ref: 'm', rule: {max: 60, min: 0}, value: '*', reg: ',-*/'},
      {title: '小时', ref: 'h', rule: {max: 60, min: 0}, value: '*', reg: ',-*/'},
      {title: '日', ref: 'd', rule: {max: 31, min: 1}, value: '*', reg: '-*?/LW', dis: false},
      {title: '月', ref: 'M', rule: {max: 12, min: 1}, value: '*', reg: ',-*/'},
      {title: '周', ref: 'w', rule: {max: 7, min: 1}, value: '?', reg: ', -*?/L#', dis: true},
      {title: '年', ref: 'y', rule: {max: 2100, min: 1970}, value: '*', reg: ',-*/'}
    ]
    const tag = 's';
    return {list, tag};
  }
  import cronRuleInfo from './cron-rule-info'
  export default {
    data() {
      return create_data()
    },
    computed: {
      completeCron() {
        const strs = [];
        this.list.forEach(item => {
          strs.push(item.value);
        })
        return strs.join(' ');
      }
    },
    components: {
      cronRuleInfo
    },
    methods: {
      change(obj) {
        this.list.forEach(item => {
          if (obj.type === item.ref) item.value = obj.value;
          if (obj.type === 'd' || obj.type === 'w') {
            setTimeout(() => this.changeWeekorDay(obj), 0)
          }
        })
      },
      changeWeekorDay(obj) {
        const _change_key = obj.type === 'd' ? 'w' : 'd';
        const _row = this.list.find(item => item.ref === _change_key);
        _row.value = obj.value === '?' ? '*' : '?';
        _row.dis = obj.value === '?' ? false : true;
        if (obj.value !== '?') {
          this.$refs[_change_key][0].reset({radio: 5});
        } else {
          this.$refs[_change_key][0].reset({radio: 1});
        }
      },
      getLastData() {
        return this.completeCron;
      },
      reset() {
        const _obj = create_data();
        for (const key in _obj) {
         this[key] = _obj[key] 
        }
        for (let i = 0; i < this.list.length; i++) {
          const item = this.list[i];
          if (this.$refs[item.ref]) this.$refs[item.ref][0].reset();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box1{
    border: 1px solid #DCDFE6;
    border-top: none;
    margin-top: -24px;
    padding: 24px 15px 15px;
    display: flex;
  }
  .box2{
    border: 1px solid #DCDFE6;
    padding: 15px;
    margin-top: 20px;
  }
  .box1-d{
    min-width: 40px;
    text-align: center;
    font-size: 14px;
    margin-right: 3px;
  }
  .d-title{
    font-weight: bold;
    font-size: 12px;
  }
  .d-text{
    height: 30px;
    line-height: 30px;
    border: 1px solid #DCDFE6;
    margin-top: 3px;
    padding: 0 10px;
  }
  .flex1{
    flex: 1;
  }
  .li{
    line-height: 20px;
    color: #6f6f6f;
  }
</style>